import { Component, OnInit } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppService } from '../../services/app.service';
import { Router } from '@angular/router';
import { first } from 'rxjs';
import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';


import { HeaderPluginsComponent } from '../../modules/header-plugins/header-plugins.component';

@Component({
    selector: 'app-plugins',
    standalone: true,
    templateUrl: './plugins.component.html',
    styleUrl: './plugins.component.scss',
    imports: [RouterModule,
        FormsModule,
        ReactiveFormsModule,
        CommonModule,
        HttpClientModule,
        HeaderPluginsComponent
    ]
})
export class PluginsComponent implements OnInit {

    public accesstoken: any;
    public pluginList: any;
    public pluginListSubcribe: any;

    constructor(private route: Router,private appService : AppService) { }

    async ngOnInit() {
        this.pluginListSubcribe = await this.appService.loadPlugin().subscribe(res => {
            console.log('res', res);
           this.pluginList = res;
           console.log(this.pluginList)
          });

          const swiper = new Swiper(".mySwiper", {
            slidesPerView: 1,
            // spaceBetween: 30,
            loop: true,
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
          
    }
    async getItemAccesstoken() {
        this.accesstoken = await localStorage.getItem('token');
        if (!this.accesstoken) {
            this.route.navigate(['/login']);
        }
    }

    async qualityDowload(){
        this.accesstoken = await localStorage.getItem('token');
        this.appService.qualityDowload(this.accesstoken).pipe(first())
        .subscribe(data => {
          console.log(data);
          if (data.message == 'success') {
            // const redirect = this.appService.redirectURL ? this.appService.redirectURL : '/';
          }
        }, error => {
          alert("ดาวน์ไม่สำเร็จ");
        });
    }
    async logout() {
        await this.appService.destroyToken();
        await window.location.reload();
    }

    currentPage: number = 1;
    itemsPerPage: number = 10; // Adjust the number of items per page as needed
  
    get startIndex(): number {
      return (this.currentPage - 1) * this.itemsPerPage;
    }
  
    get endIndex(): number {
      return this.startIndex + this.itemsPerPage;
    }
  
    get displayedPlugins(): any[] {
      return this.pluginList.plugins.slice(this.startIndex, this.endIndex);
    }
    // Inside your component class
prevPage() {
  if (this.currentPage > 1) {
    this.currentPage--;
  }
}

nextPage() {
  if (this.endIndex < this.pluginList.plugins.length) {
    this.currentPage++;
  }
}

}
